<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleTabsClick">
      <el-tab-pane label="销售楼盘" name="sellTower" />
      <el-tab-pane label="房屋租凭" name="tenement" />
    </el-tabs>
    <el-row type="flex" class="row-bg">
      <el-col :span="8">
        <el-cascader
          clearable
          v-model="selectedArr"
          :options="options"
          @change="handleChange"
        ></el-cascader>
      </el-col>
      <el-col :span="6">
        <el-input
          :style="{ width: '250px', margin: '0 15px' }"
          placeholder="请输入内容"
          v-model="searchVal"
          clearable
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col
        ><el-button type="primary" @click="addBtn">新增</el-button></el-col
      >
    </el-row>
    <el-table  border  :data="tableData[activeName]" stripe style="width: 100%">
      <el-table-column align="center" type="index" label="序号"></el-table-column>
      <el-table-column align="center" prop="name" :label="activeName=='sellTower'?'楼盘名称':'小区名称'" ><span slot-scope="scoped">{{scoped.row.name +'公寓'}}</span> </el-table-column>
      <el-table-column v-if="activeName=='tenement'" align="center" prop="title" label="标题"> </el-table-column>
      <el-table-column v-if="activeName=='tenement'" align="center" prop="acreage" label="面积"><span slot-scope="scoped">{{scoped.row.acreage +'m²'}}</span> </el-table-column>
      <el-table-column v-if="activeName=='sellTower'" align="center" prop="address" label="所属区域"> </el-table-column>
      <el-table-column v-if="activeName=='sellTower'" align="center" prop="price" label="价格"> <span slot-scope="scoped">{{scoped.row.price +'元/m²'}}</span></el-table-column>
      <el-table-column v-if="activeName=='tenement'" align="center" prop="price" label="总价"> <span slot-scope="scoped">{{scoped.row.price +'万'}}</span></el-table-column>
      <el-table-column v-if="activeName=='sellTower'" align="center" prop="updateTime" label="更新时间"> </el-table-column>
      <el-table-column align="center" prop="rank" label="排序"> </el-table-column>
      <el-table-column align="center" prop="status" label="状态">
        <template slot-scope="scoped">
          <el-switch
            :value ="scoped.row.status"
            @change="changeStatus(scoped.row)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="350">
        <template slot-scope="scoped">
          <el-button v-if="activeName=='sellTower'"  size="mini" type="primary">户型</el-button>
          <el-button v-if="activeName=='sellTower'"  size="mini" type="success">相册</el-button>
          <el-button v-if="activeName=='sellTower'"  size="mini" type="info">沙盘</el-button>
          <el-button @click="editBtn(scoped.row)" size="mini" type="warning">编辑</el-button>
          <el-button @click="delData(scoped.row)" size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageindex"
          :page-sizes="[5, 10, 15]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      v-if="dialogVisible"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      ref="ruleForm"
      width="30%"
      :before-close="diaLogClose">
      <el-form :model="housingForm" status-icon ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item  :label="activeName=='sellTower'?'楼盘名称':'小区名称'" prop="name">
          <el-input  v-model="housingForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="activeName=='sellTower'" label="更新时间" prop="updateTime">
          <el-input  v-model="housingForm.updateTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="activeName=='sellTower'" label="所属区域" prop="address">
          <el-input  v-model="housingForm.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  :label="activeName=='sellTower'?'价格':'总价'" prop="price">
          <el-input  v-model="housingForm.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="activeName=='tenement'" label="标题" prop="title">
          <el-input  v-model="housingForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="activeName=='tenement'" label="面积" prop="acreage">
          <el-input  v-model="housingForm.acreage" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="排序" prop="rank">
          <el-input v-model.number="housingForm.rank"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            v-model ="housingForm.status"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="formSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import options from '../utils/cascader'
import api from '@/api/index'
export default {
  data () {
    return {
      dialogVisible: false,
      dialogTitle: '',
      diaLogStatu: '',
      activeName: 'sellTower',
      currentSelect: ['select1'],
      searchVal: '',
      selectedArr: [],
      options,
      tableData: {
        sellTower: [],
        tenement: []
      },
      housingForm: {
        name: '',
        price: 0,
        address: '',
        rank: '',
        updateTime: '',
        status: false,
        // 房租
        title: '', // 小区名称
        acreage: '' // 面积
      },
      rules:{
        name: [
          { required: true , message:'输入不能为空', trigger: 'blur' }
        ],
        price: [
          { required: true , message:'输入不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true , message:'输入不能为空', trigger: 'blur' }
        ],
        rank:[
          { required: true , message:'输入不能为空', trigger: 'blur' }
        ],
        updateTime:[
          { required: true , message:'输入不能为空', trigger: 'blur' }
        ],
        status:[
          { required: true , message:'输入不能为空', trigger: 'blur' }
        ],
        title:[
          { required: true , message:'输入不能为空', trigger: 'blur' }
        ],
        acreage:[
          { required: true , message:'输入不能为空', trigger: 'blur' }
        ],

      },
      total: 0,
      pageindex: 1,
      pagesize: 10
    }
  },
  created () {
    this.getList()
  },
  watch: {
    activeName () {
      this.getList()
    },
    dialogVisible (newVal) {
      if (!newVal) {
        for (const key in this.housingForm) {
          if (typeof this.housingForm[key] === 'boolean') {
            this.housingForm[key] = false
          } else {
            this.housingForm[key] = ''
          }
        }
      }
    }
  },
  methods: {
    handleTabsClick () {},
    handleChange () {},
    handleSizeChange (size) {
      this.pagesize = size
      this.getList()
    },
    handleCurrentChange (index) {
      this.pageindex = index
      this.getList()
    },
    async changeStatus (row) {
      const { activeName: type } = this
      const { data } = await api.edithousingList({ type, isSwitch: !row.status, id: row.id })
      if (data.meta.status) {
        this.$message.success(data.meta.msg)
        row.status = !row.status
        return
      }
      this.$message.error(data.meta.msg)
    },
    async formSubmit () {
      switch (this.diaLogStatu) {
        case 'edit':
          this.editSubmit().then(res => {
            if (res.meta.status) {
              this.$message.success(res.meta.msg)
              this.dialogVisible = false
              this.getList()
              return
            }
            return this.$message.error(res.meta.msg)
          })
          break
        case 'add':
          this.$refs.ruleForm.validate((valid)=>{
             if(valid) return this.addSubmit()
             this.$message.error('请检查填写项是否正确')
          })
          
      }
    },
    diaLogClose () {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.dialogVisible = false
        })
        .catch(_ => {})
    },
    addBtn () {
      this.dialogVisible = true
      this.diaLogStatu = 'add'
    },
    editBtn (row) {
      this.dialogTitle = '编辑信息'
      this.diaLogStatu = 'edit'
      this.dialogVisible = true
      for (const key in row) {
        this.housingForm[key] = row[key]
      }
    },
    async editSubmit () {
      const { activeName: type, housingForm } = this
      const { data } = await api.edithousingList({ type, housingForm })
      return data
    },
    async addSubmit () {
      const { activeName: type, housingForm } = this
      const { data } = await api.addHousingList({ housingForm, type })
      if (data.meta.status) {
        this.$message.success(data.meta.msg)
        this.getList()
        this.dialogVisible = false
        return
      }
      this.$message.error(data.meta.msg)
    },
    async delData (row) {
      try {
        const { id } = row
        const { activeName: type } = this
        await this.$confirm('确认删除吗？')
        const { data } = await api.deleteHousingList({ type, id })
        if (data.meta.status) {
          this.$message.success(data.meta.msg)
          this.getList()
        } else {
          this.$message.error(data.meta.msg)
        }
      } catch (error) {
        this.$message.info('取消删除')
      }
    },
    async getList () {
      const { data } = await api.gethousingList({
        type: this.activeName,
        pageindex: this.pageindex,
        pagesize: this.pagesize,
        keyWord: this.searchVal
      })
      this.tableData[this.activeName] = data.data.list
      this.total = data.data.total
    }
  }

}
</script>

<style>
</style>
